<!DOCTYPE html>
<html lang="en">

<head>
	<title>KEYSTATION</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<link rel="shortcut icon" href="img/favicon.ico">
	<!-- css -->
	<link rel="stylesheet" href="css/normalize.custom.css">
	<link rel="stylesheet" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/input.css">
	<link rel="stylesheet" href="css/styles.css">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!-- js -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
	<script src="js/bundle.js"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', 'UA-146700011-1');
	</script>
	<script>
		function getParameterByName(name, url) {
			if (!url) url = window.location.href;
			name = name.replace(/[\[\]]/g, '\\$&');
			var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
					results = regex.exec(url);
			if (!results) return null;
			if (!results[2]) return '';
			return decodeURIComponent(results[2].replace(/\+/g, ' '));
		}

		function sendEventToParent() {
			var account 	= $(".input-account").val();
			var password 	= $("input[type=password]").val();

			if ($.trim(account) == "") {
				$("#formInfoMessage").hide();
				$("#errorOnSignIn").show().find('span').text("Invalid account.");
				return;
			}

			if ($.trim(password) == "") {
				$("#formInfoMessage").hide();
				$("#errorOnSignIn").show().find('span').text("Could not retrieve account stored in Keychain. Press the button below the Import Wallet.");
				return;
			}

			window.pinType = "signin";
			window.lcd = {{.Lcd}};
			$(".pin-wrap").addClass("open");
		}
	</script>
</head>

<body>
	<div id="app">
		<div class="inner">
			<h1><img src="img/keystation_logo_.png" alt="" width="145"></h1>
			<h2>Sign In</h2>

			<form class="keystation-form">
				<span class="input input--fumi">
					<input class="input__field input__field--fumi input-account" type="text">
					<label class="input__label input__label--fumi">
						<i class="fa fa-fw fa-user icon icon--fumi"></i>
						<span class="input__label-content input__label-content--fumi">Wallet Name</span>
					</label>
				</span>
				<input style="display:none;" type="password" autocomplete="current-password" tabindex="-1" spellcheck="false">
				<p id="formInfoMessage" class="information-text">
					<i class="fa fa-fw fa-question-circle"></i> Unavailable in guest mode or incognito mode.
				</p>
				<p id="errorOnSignIn" class="error">
					<!-- error msg -->
					<i class="fa fa-fw fa-exclamation-circle"></i> <span></span>
				</p>

				<button type="button" onclick="sendEventToParent()" id="nextBtn">Next</button>
			</form>

			<a href="{{.QueryUrl}}">Import Wallet</a>

			<div class="form-fotter">
				<a href="https://github.com/cosmostation/keystation" target="_blank"><i class="fa fa-fw fa-github"></i></a>
			</div>
			<a class="disableChecksum" style="position:fixed;bottom:0;left:0;color:#fff;" href="{{.QueryUrl}}disablechecksum">■</a>

            <!-- pin -->
            <div class="pin-wrap">
                <button type="button">&#10005;</button>
                <div class="pin-cont">
                    <h2>Please enter your PIN.</h2>
                    <div class="dots-cointainer">
                        <div class="dots">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div>+</div>
                            <div class="dot"></div>
                        </div>
                    </div>

                    <div class="wrapper-number no-select">
                        {{.ShuffledNumCode}}
                    </div>

                    <div class="wrapper-alphabet no-select">
                        {{.ShuffledAlphabetCode}}
                    </div>
                </div>
            </div>
			<!-- pin end -->
		</div>
		<!-- inner end -->
	</div>
	<!-- #app end -->

	<!-- js -->
	<script src="js/classie.js"></script>
	<script src="js/input.js"></script>
   <script src="js/pin.js"></script>
</body>

</html>